<template>
  <view class="">
    <image class="back-img" src="../static/return.png" :style="{top: statusBarHeight + 'px'}" mode="widthFix"
      @click="back"></image>
    <div class="box" :style="{animationDuration: sudu + 's', height: bannerHeight + 'px',width: bannerWidth + 'px'}">
      <ul class="minbox" :style="{height: bannerHeight + 'px',width: bannerWidth + 'px'}">
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform': 'translateZ('+banWidth+'px)'}">
          1</li>
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform':'rotateX(180deg)' + 'translateZ('+banWidth+'px)'}">
          2</li>
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform':'rotateX(-90deg)' + 'translateZ('+banWidth+'px)'}">
          3</li>
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform':'rotateX(90deg)' + 'translateZ('+banWidth+'px)'}">
          4</li>
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform':'rotateY(-90deg)' + 'translateZ('+banWidth+'px)'}">
          5</li>
        <li
          :style="{height: bannerHeight + 'px',width: bannerWidth + 'px','backgroundImage':'url('+image+')','transform':'rotateY(90deg)' + 'translateZ('+banWidth+'px)'}">
          6</li>
      </ul>
    </div>
    <view class="button">
      <view class="btn" @click="jiaClick()">
        大小+
      </view>
      <view class="btn" @click="jianClick()">
        大小-
      </view>
      <view class="btn" @click="suduClick()">
        sudu+
      </view>
      <view class="btn" @click="suduClickjian()">
        sudu-
      </view>
      <view class="btn" @click="changeBtn()">
        选择图片
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        image: '',
        bannerHeight: 250,
        bannerWidth: 250,
        banWidth: 125,
        sudu: 15,
        statusBarHeight: 0
      }
    },
    onShow() {
      this.image = this.$store.state.images
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 10;
    },
    methods: {
      changeBtn() {
        uni.navigateTo({
          url: '/pagesB/list?type=change'
        })
      },
      jiaClick() {
        if (this.bannerHeight + this.banWidth <= 10) return
        this.bannerHeight += 2;
        this.bannerWidth += 2;
        this.banWidth += 1;
      },
      jianClick() {
        this.bannerHeight -= 2;
        this.bannerWidth -= 2;
        this.banWidth -= 1;
      },
      suduClick() {
        if (this.sudu < 0.2) return
        if (this.sudu > 1) {
          this.sudu--
        } else {
          this.sudu -= 0.1
        }
      },
      suduClickjian() {
        this.sudu++
      }
    }
  }
</script>

<style lang="less">
  page {
    background-color: black;
  }

  .back-img {
    position: absolute;
    left: 30rpx;
    width: 45rpx;
    height: 45rpx;
    z-index: 999;
  }

  .box {
    margin: 0 auto;
    position: relative;
    top: 200rpx;
    -webkit-transform-style: preserve-3d;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

  }

  .minbox {
    position: absolute;
    -webkit-transform-style: preserve-3d;
  }

  .minbox li {
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
  }

  @keyframes move {
    0% {
      -webkit-transform: rotateX(13deg) rotateY(0deg);
    }

    100% {
      -webkit-transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .btn {
    margin-left: 10rpx;
    margin-top: 20rpx;
    position: relative;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    width: 230rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 25rpx;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4, #1fc21f);
    background-size: 400%;
    border-radius: 60rpx;
  }

  .btn:hover {
    animation: animate 2s linear infinite;
  }

  @keyframes animate {
    0% {
      background-position: 0%;
    }

    100% {
      background-position: 400%;
    }
  }

  .btn::before {
    content: '';
    position: absolute;
    top: -5rpx;
    left: -5rpx;
    right: -5rpx;
    bottom: -5rpx;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4, #1fc21f);
    background-size: 400%;
    border-radius: 25rpx;
    opacity: 0;
    transition: 0.5s;
  }

  .btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 2s linear infinite;
    border-radius: 25rpx;
  }

  .button {
    margin-top: 400rpx;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
  }
</style>
